<script setup>
import { computed, ref, reactive } from 'vue'
import { getAllRepairService, passRepairService } from '@/api/repair'
import { ElMessage } from 'element-plus'
import { findRepairmanService } from '@/api/worker'

const tableData = reactive([])
const repairmanList = reactive([])

//搜索列表内容
const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.detail.toLowerCase().includes(search.value.toLowerCase())
    )
)

async function getRepairList() {
    let result = await getAllRepairService()
    for (let i = 0; i < result.data.length; i++) {
        tableData.push(result.data[i])
    }
}
getRepairList()

async function findRepairman() {
    let result = await findRepairmanService()
    for (let i = 0; i < result.data.length; i++) {
        repairmanList.push(result.data[i])
    }
}
findRepairman()


var temp = { id: 0, roomNumber: 0, detail: '', workerId: '' }
const passDialogVisible = ref(false)
const handPass = async (index, row) => {
    temp = { id: 0, roomNumber: 0, detail: "", workerId: '' }
    temp = { id: row.id, roomNumber: row.roomNumber, detail: row.detail, workerId: '' }
    // console.log(index, row)
    passDialogVisible.value = true
}

const takeRepairman = async (index, row) => {
    temp.workerId = row.workerId
    passRepair()
}

const passRepair = async () => {
    let result = await passRepairService({ id: temp.id, workerId: temp.workerId })
    ElMessage.success('已成功安排维修人员')
    // userkey.value++
    tableData.length = 0
    getRepairList()
    passDialogVisible.value = false
}

const classObje = (status) => {
    if (status === 1) {
        return { color: "pink" }
    } else if (status === 0) {
        return { color: "lightgray" }
    } else if (status === 2) {
        return { color: "#13ce66" }
    }
}
</script>



<template>
    <div style="width: 100%;padding:25px;">
        <div style="display: flex;padding-bottom: 20px;padding-top: 10px;">
            <el-input v-model="search" placeholder="查找" style="width: 200px;margin-left:100vh;" />
        </div>
        <el-table :data="filterTableData" border stripe style="min-width:calc(100vh - 200px)">
            <el-table-column label="ID" prop="id" width="70px" sortable />
            <el-table-column label="门牌号" prop="roomNumber" sortable width="120px" />
            <el-table-column label="详情描述" prop="detail" />
            <el-table-column label="图片" prop="photo">
                <template #default="scope">
                    <el-image :src="scope.row.photo" :preview-src-list="[scope.row.photo]" preview-teleported="true" style="height: 75px;"/>
                </template>
            </el-table-column>
            <el-table-column label="报修时间" prop="time"/>
            <el-table-column label="状态" prop="status" sortable width="90px">
                <template #default="scope">
                    <span :style="classObje(scope.row.status)">
                        <i v-if="scope.row.status === 0">待审核</i>
                        <i v-if="scope.row.status === 1">待维修</i>
                        <i v-if="scope.row.status === 2">已完成</i>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="维修员ID" prop="workerId" width="90px" />
            <el-table-column label="操作" align="center" width='200px'>
                <template #default="scope">
                    <el-button v-if="scope.row.status === 0" @click="handPass(scope.$index, scope.row)"
                        style="color:#13ce66">指派维修员</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 指派维修员弹窗 -->
    <el-dialog v-model="passDialogVisible" title="通过申请" width="45%">
        <el-table :data="repairmanList">
            <el-table-column prop="workerId" label="工号" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="phoneNumber" label="电话" />
            <el-table-column prop="email" label="邮箱" />
            <!-- <el-table-column prop="workPlace" label="工作范围" /> -->
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button @click="takeRepairman(scope.$index, scope.row)" style="color:#13ce66">指派</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>
